<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

<h3>
	<s:text name="page.heading" />
</h3>
<s:form id="switchPanelSaveFormId" cssClass="form-horizontal"
	action="save" namespace="/switchPanel" method="post" theme="simple">
	<s:hidden name="mode" />
	<s:hidden name="switchPanel.id" />
	<div class="form-group">
		<s:actionerror cssClass="alert alert-error" />
	</div>
	<div class="form-group">
		<s:actionmessage cssClass="alert alert-success" />
	</div>

	<div class="control-group">
		<label class="control-label"><s:text name="user.name" /></label>
		<div class="controls">
			<s:textfield cssClass="input-xlarge" name="switchPanel.userName"
				value="sysop" required="true" />
		</div>
	</div>
	<div class="control-group">
		<label class="control-label"><s:text name="user.password" /></label>
		<div class="controls">
			<s:password name="switchPanel.userPassword" cssClass="input-xlarge"
				value="sysop" required="true" showPassword="true" />
		</div>
	</div>
	<div class="control-group">
	<span class="tooltip" onmouseout="tooltip.hide();"
      onmouseover="tooltip.show('<s:property value="item.description" />');">
        test
    </span>
	<label class="control-label"><s:text name="switchPanel.host" /></label>
		<div class="controls">
			<s:textfield id="panelUrl" name="switchPanel.url"
				cssClass="input-xlarge"
				placeholder="%{getText('switchPanel.host.placeholder')}" />
		</div>
	</div>
	<div class="control-group">
		<label class="control-label"><s:text name="switchPanel.protocol" /></label>
		<div class="controls">
			<s:select list="#{'http':'http', 'https':'https'}" name="switchPanel.protocol"></s:select>
		</div>
	</div>
	<div class="control-group">
		<label class="control-label"><s:text name="port.http" /></label>
		<div class="controls">
			<s:textfield id="panelHttpPort" name="switchPanel.httpPort"
				cssClass="input-small" placeholder="%{getText('port.http')}" />
			<s:url var="testConnectionUrl" action="validateConnection"
				namespace="/switchPanel"></s:url>
				<span class="conStatus"></span>
			<button type="button" id="validateCon">Check Connection</button>
		</div>
	</div>

	<div class="form-actions">
		<button type="submit" class="btn btn-primary">
			<s:text name="form.btn.submit" />
		</button>
		<button type="reset" class="btn">
			<s:text name="form.btn.reset" />
		</button>
	</div>
</s:form>
<script type="text/javascript">
	$(document).ready(function() {
		$('#validateCon').click(function() {
			var panelUrl = $('#panelUrl').val();
			var panelHttpPort = $('#panelHttpPort').val();
			if(panelHttpPort=="") {
				panelHttpPort="80";
			}
			$.ajax({
				url : "<s:property value='testConnectionUrl'/>",
				type : 'POST',
				data : 'url=' + panelUrl + '&port=' + panelHttpPort,
				success : function(response) {
					$('#validateCon').hide();
					if(response=="ok") {
						$('#validateCon').siblings('.conStatus').html('<img src="<s:url value='/img/ok.png'/>" />');
					}
					else {
						$('#validateCon').siblings('.conStatus').html('<img src="<s:url value='/img/failed.png'/>" />');
					}
				}
			});
		});

		$('#panelUrl').keyup(function() {
			$('#validateCon').siblings('.conStatus').html('');
			$('#validateCon').show();
		});

		$('#panelHttpPort').keyup(function() {
			$('#validateCon').siblings('.conStatus').html('');
			$('#validateCon').show();
		});

	});

	
</script>